<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="收件箱" name="first">
            <el-table :data="tableData" border style="width: 100%"  >
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="发件人" width="180" />
    <el-table-column prop="address" label="信息" />
    
<el-table-column label="操作">
        <template #default='scope'>
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope)"
        >
          删除
        </el-button>
        
      </template>
</el-table-column>
  </el-table>
 
  
        </el-tab-pane>



        <el-tab-pane label="发送" name="second">
            <div style="width: 100%">
               
            </div>
        </el-tab-pane>
    </el-tabs>

 

 
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const now = new Date()

const deleteRow = (scope) => {
    console.log(scope);
//   tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD'),
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',

  })
}


var tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>
<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>